feat: disable animated transitions by default when prefers-reduced-motion: reduce
#281
Conversation
…s for dropdown & navbar
✅ Deploy Preview for infima ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
facebook-github-bot
added
the
CLA Signed
|
Ready for review. For infima, it's what I can done. As far as the mobile version of the TOC is concerned, this is normally done on the Docusaurus side. |
|
Thanks, will review it soon. Was wondering if maybe we could use this CSS var trick to reduce motion everywhere at once? :root {
--ifm-transition-fast: 100ms;
}
@media (prefers-reduced-motion: reduce) {
:root {
--ifm-transition-fast: 0ms;
}
}I didn't try nor study that solution in depth but that's probably worth exploring so that we avoid spreading the mediaqueries everywhere. |
|
Hmm, intresting, I will try this ^^. |
|
By the way, can I add somes new variables for this ? Because in css, I have different speeds for some transitions. Or maybe homogenise it. |
|
I don't know, if this makes sense we can create "design tokens" for speeds 🤪 I don't know how many different anim speeds we have |
|
For modified files, I have 2 different speeds for navbar (one at 250ms and the other to 100ms). And for dropdown, I have a transition without "speed". https://github.com/facebookincubator/infima/pull/281/files#diff-9e6f27542a279ed36f85e384f024d2b131d4d207208eecb8711f99b0800c8a74R218-R223 |
|
|
||
| @media (prefers-reduced-motion) { | ||
| @mixin transition visibility, 100ms, ease-in-out; | ||
| } |
There was a problem hiding this comment.
similarly, why do the backdrop appear before the sidebar?
I would test with the default 200ms anim delay for both and see if it looks good (not sure but worth testing to see if we can simplify)
There was a problem hiding this comment.
I change the speed and delete media query. Don't hesitate to tell me if I need to change anything else.
|
Any news ? |
slorber
changed the title
prefers-reduced-motion media feature to disable motion transitions for dropdown & navbar componentsprefers-reduced-motion: reduce media)
slorber
changed the title
prefers-reduced-motion: reduce media)prefers-reduced-motion: reduce
|
will be integrated in facebook/docusaurus#8674 |
|
Nice ! However, the animation visible on the video below is managed by Docusaurus (with the Enregistrement.2023-02-17.122019.mp4 |
|
Yes, I added a few fixes on the Docusaurus side as well to handle that |
|
Perfect, thanks ^^. |
Linked to facebook/docusaurus#8506.